<article>
  <header class="result-header">
    <div class="result-info">
      <DButton
        @action={{this.downloadResultJson}}
        @icon="download"
        @label="explorer.download_json"
      />

      <DButton
        @action={{this.downloadResultCsv}}
        @icon="download"
        @label="explorer.download_csv"
      />

      {{#if this.canShowChart}}
        {{#if this.chartDisplayed}}
          <DButton
            @action={{this.hideChart}}
            @icon="table"
            @label="explorer.show_table"
          />
        {{else}}
          <DButton
            @action={{this.showChart}}
            @icon="chart-bar"
            @label="explorer.show_graph"
          />
        {{/if}}
      {{/if}}
    </div>

    <div class="result-about">
      {{this.resultCount}}
      {{this.duration}}
    </div>

    <br />

    {{~#if this.explainText}}
      <pre class="result-explain">
        <code>
          {{~this.explainText}}
        </code>
      </pre>
    {{~/if}}

    <br />
  </header>

  <section>
    {{#if this.chartDisplayed}}
      <DataExplorerBarChart
        @labels={{this.chartLabels}}
        @values={{this.chartValues}}
        @datasetName={{this.chartDatasetName}}
      />
    {{else}}
      <table>
        <thead>
          <tr class="headers">
            {{#each this.columnNames as |col|}}
              <th>{{col}}</th>
            {{/each}}
          </tr>
        </thead>
        <tbody>
          {{#each this.rows as |row|}}
            <QueryRowContent
              @row={{row}}
              @columnComponents={{this.columnComponents}}
              @lookupUser={{this.lookupUser}}
              @lookupBadge={{this.lookupBadge}}
              @lookupPost={{this.lookupPost}}
              @lookupTopic={{this.lookupTopic}}
              @lookupGroup={{this.lookupGroup}}
              @lookupCategory={{this.lookupCategory}}
              @transformedPostTable={{this.transformedPostTable}}
              @transformedBadgeTable={{this.transformedBadgeTable}}
              @transformedUserTable={{this.transformedUserTable}}
              @transformedGroupTable={{this.transformedGroupTable}}
              @transformedTopicTable={{this.transformedTopicTable}}
              @site={{this.site}}
            />
          {{/each}}
        </tbody>
      </table>
    {{/if}}
  </section>
</article>